<template>
    <div class="item" v-if="item!=null" @click="gotoDetail(item)">
      <el-image :src="item.imgurl" style="height:178px;width:178px;"></el-image>
      <div class="text item">
       {{ item.title }}
      </div>
      <div class="price">￥{{ item.price }}</div>
    </div>
</template>

<script>
export default {
  name: "GoodItem",
  props: {
    item: Object,
  },
  methods: {
    gotoDetail(item){
     this.$router.push({
        path:'detail',
        query:{
          gid:item.gid,
        }
      })
    }
  },
};
</script>

<style scoped>
.item{
  display: inline-block;
  width: 188px;
  height: 275px;
  padding: 10px 5px;
  text-align: center;
  box-sizing: border-box;
  margin: auto 20px;
  cursor: pointer;
}
.text {
  height: 45px;
  font-size: 14px;
  line-height: 1.3;
  margin: 5px 0;
  overflow: hidden;
}
.text span {
  text-overflow: ellipsis;
}
.price {
  display: inline-block;
  color: rgb(240, 43, 43);
  margin-top: 15px;
  margin-right: 5px;
  text-align: left;
  font-size: 16px;
}
</style>